<template>
  <div class="bg">
    <div class="detail">
      <!-- 商品 -->
      <div class="detail-shop">
        <!-- 左侧放大镜 -->
        <div class="previewWrap">
          <!--放大镜效果-->
          <Zoom
            :image="goodsDetailStore.skuInfo.skuDefaultImg"
            :imageList="goodsDetailStore.skuInfo.skuImageList"
          />
        </div>
        <!-- 右侧内容 -->
        <div class="content">
          <div class="desc">
            <h1>
              {{ goodsDetailStore.skuInfo.skuName }}
            </h1>
            <div class="xiaoliang">月销200+</div>
            <div class="price">
              <span class="tj">超市推荐￥</span>
              <span class="pr">{{ goodsDetailStore.skuInfo.price }}</span>
            </div>
          </div>
          <div class="canshu">
            <div class="line">优惠</div>
            <div class="line">保障</div>
            <div>参数~</div>
          </div>
          <div class="canshu-card">参数，详情</div>
          <div class="address">
            <div class="address-text">配送：</div>
            <div class="address-item">
              <div class="select">
                <select id="sid" onchange="selectcity()">
                  <option>深圳市</option>
                  <option>湖南</option>
                  <option>湖北</option>
                  <option>浙江</option>
                  <option>广东</option>
                </select>
                <select id="ssid">
                  <option>宝安区</option>
                </select>
              </div>
              <div class="text">
                <div>
                  单品包邮（不参与满88元包邮） 17:00前付款，预计3月23日送达
                </div>
                <div>配送规则</div>
              </div>
            </div>
          </div>
          <div class="weight">
            <span class="weight-text">重量：</span>
            <span>{{ goodsDetailStore.skuInfo.weight }}kg</span>
          </div>
          <div class="buycount">
            <div>购买规格：</div>
            <div class="count-item">
              <div class="item active">1件</div>
              <div class="item">2件</div>
            </div>
          </div>
          <div class="num">
            <div>数量:</div>
            <!-- 购物车数量 -->
            <InputNumber />
          </div>
          <div class="add">
            <div class="qiang">马上抢</div>
            <div class="jiagou" @click="addCart">加入购物车</div>
            <div class="line"></div>
            <div class="sc">收藏</div>
          </div>
        </div>
      </div>
      <!-- 评论区 -->
      <div class="comment">
        <div class="cart">
          <div class="item">
            <div
              class="item1"
              :class="index === 1 ? 'active' : ''"
              @click="tabHandler(1)"
            >
              宝贝详情
            </div>
            <div
              class="item2"
              :class="index === 2 ? 'active' : ''"
              @click="tabHandler(2)"
            >
              宝贝评论
            </div>
          </div>
          <div class="cart-detail" v-show="index === 1">
            <img src="@/statics/detail/详情上1.jpg" alt="" />
            <img src="@/statics/detail/详情上2.jpg" alt="" />
            <img src="@/statics/detail/详情上3.jpg" alt="" />
            <img src="@/statics/detail/详情上4.jpg" alt="" />
          </div>
          <div class="cart-comment" v-show="index === 2">
            <div class="cart-comment-item">
              <div
                class="itab"
                :class="tabIndex === 3 ? 'active' : ''"
                @click="tabItemHandler(3)"
              >
                全部
              </div>
              <div
                class="itab0"
                :class="tabIndex === 4 ? 'active' : ''"
                @click="tabItemHandler(4)"
              >
                有图/视频
              </div>
              <div
                class="itab"
                :class="tabIndex === 5 ? 'active' : ''"
                @click="tabItemHandler(5)"
              >
                追评
              </div>
            </div>
            <div class="itab-detail" v-show="tabIndex === 3">aaaaaaaa</div>
            <div class="itab-detail" v-show="tabIndex === 4">
              bbbbbbbbbbbbbbbb
            </div>
            <div class="itab-detail" v-show="tabIndex === 5">
              ccccccccccccccc
            </div>
          </div>
        </div>
      </div>
      <!-- 推荐 -->
      <div class="supermarket">
        <div class="spuer-header">本店推荐</div>
        <div class="marketDetail">
          <div class="goods-detail">
            <img
              src="@/statics/images/电饭煲.jpg_.webp"
              alt=""
              class="goods-img"
            />
            <div class="goods-desc">
              苏泊尔蒸锅家用304不锈钢蒸笼加厚双层大号电磁炉家用煤气灶
            </div>
            <span class="goods-price">￥199</span>
          </div>
          <div class="goods-detail">
            <img
              src="@/statics/supermarket/牛奶.webp"
              alt=""
              class="goods-img"
            />
            <div class="goods-desc">
              【超市独家】蒙牛小充食脱脂纯牛奶250ml*24包
            </div>
            <span class="goods-price">￥89.9</span>
          </div>
          <div class="goods-detail">
            <img
              src="@/statics/supermarket/牛奶.webp"
              alt=""
              class="goods-img"
            />
            <div class="goods-desc">
              【超市独家】蒙牛小充食脱脂纯牛奶250ml*24包
            </div>
            <span class="goods-price">￥89.9</span>
          </div>
          <div class="goods-detail">
            <img
              src="@/statics/supermarket/牛奶.webp"
              alt=""
              class="goods-img"
            />
            <div class="goods-desc">
              【超市独家】蒙牛小充食脱脂纯牛奶250ml*24包
            </div>
            <span class="goods-price">￥89.9</span>
          </div>
          <div class="goods-detail">
            <img
              src="@/statics/supermarket/牛奶.webp"
              alt=""
              class="goods-img"
            />
            <div class="goods-desc">
              【超市独家】蒙牛小充食脱脂纯牛奶250ml*24包
            </div>
            <span class="goods-price">￥89.9</span>
          </div>
          <div class="goods-detail">
            <img
              src="@/statics/supermarket/牛奶.webp"
              alt=""
              class="goods-img"
            />
            <div class="goods-desc">
              【超市独家】蒙牛小充食脱脂纯牛奶250ml*24包
            </div>
            <span class="goods-price">￥89.9</span>
          </div>
          <div class="goods-detail">
            <img
              src="@/statics/supermarket/牛奶.webp"
              alt=""
              class="goods-img"
            />
            <div class="goods-desc">
              【超市独家】蒙牛小充食脱脂纯牛奶250ml*24包
            </div>
            <span class="goods-price">￥89.9</span>
          </div>
          <div class="goods-detail">
            <img
              src="@/statics/supermarket/O果汁.jpg_.webp"
              alt=""
              class="goods-img"
            />
            <div class="goods-desc">
              汇源100%苹果汁果蔬汁200ml*12盒浓缩果汁原汁饮料
            </div>
            <span class="goods-price">￥53.9</span>
          </div>
          <div class="goods-detail">
            <img
              src="@/statics/supermarket/O果汁.jpg_.webp"
              alt=""
              class="goods-img"
            />
            <div class="goods-desc">
              汇源100%苹果汁果蔬汁200ml*12盒浓缩果汁原汁饮料
            </div>
            <span class="goods-price">￥53.9</span>
          </div>
          <div class="goods-detail">
            <img
              src="@/statics/supermarket/O果汁.jpg_.webp"
              alt=""
              class="goods-img"
            />
            <div class="goods-desc">
              汇源100%苹果汁果蔬汁200ml*12盒浓缩果汁原汁饮料
            </div>
            <span class="goods-price">￥53.9</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "ShopDetail",
};
</script>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute , useRouter} from "vue-router"
import Zoom from "./Zoom/index.vue";
import InputNumber from "./InputNumber/index.vue";
import { useGoodsDetail } from "@/stores/detail";

// 引入详情函数
// import { reqGoodsDetail } from "@/api/detail";
// 引入pinia中的数据
const goodsDetailStore = useGoodsDetail();
const index = ref(1);
const tabIndex = ref(3);
const tabHandler = (num: number) => {
  index.value = num;
};
const tabItemHandler = (count: number) => {
  tabIndex.value = count;
};

// 接收路由参数
const route = useRoute();
// 路由器
const router = useRouter();

const addCart = async () => {
  await goodsDetailStore.addToCart();
  router.push({
    name: "ShopCart",
  });
};
onMounted(() => {
  goodsDetailStore.getGoodsDetail(route.query.skuId);
});
</script>
<style scoped lang="less">
.bg {
  width: 100%;
  height: 100%;
  // width: 1600px;
  // height: 3000px;
  background-color: #e9ded8;
}
.detail {
  max-width: 1190px;
  // height: calc(100vh - 1010px);
  background: #fff;
  padding-top: 12px;
  padding-left: 12px;
  margin: 20px auto 40px;
  border-radius: 18px;

  .detail-shop {
    display: flex;
    margin-right: 15px;
  }

  .content {
    margin-left: 20px;
    .desc {
      h1 {
        line-height: 28px;
        color: #000;
        font-weight: 900;
        font-size: 20px;
        margin-bottom: 5px;
      }
      .xiaoliang {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.4);
        height: 14px;
        line-height: 14px;
      }

      .price {
        color: #ff5000;
        margin-top: 10px;
        margin-bottom: 15px;
        .tj {
          margin-right: 2px;
        }
        .pr {
          font-size: 28px;
        }
      }
    }
    .canshu {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 160px;
      height: 30px;
      border: 1px solid #eee;
      border-radius: 30px;
      margin-bottom: 15px;
      .line {
        box-sizing: border-box;
        padding-right: 15px;
        border-right: 1px solid #eee;
        margin-right: 5px;
      }
    }
    .canshu-card {
      width: 500px;
      height: 450px;
      border: 1px solid #eee;
      display: none;
    }
    .canshu:hover {
      color: #ff5000;
    }
    .canshu:hover ~ .canshu-card {
      display: block;
    }
    .address {
      display: flex;
      .address-text {
        color: #888;
        margin-right: 25px;
      }

      .address-item {
        .select {
          margin-bottom: 5px;
          select {
            border: none;
          }
        }

        .text {
          display: flex;
          padding-left: 4px;
          div:first-child {
            padding-right: 7px;
            border-right: 1px solid #eee;
            margin-right: 7px;
          }
        }
      }
    }

    .weight {
      margin: 20px 0;
      .weight-text {
        color: #888;
        margin-right: 30px;
      }
    }

    .buycount {
      color: #888;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      div {
        margin-right: 6px;
      }
      .count-item {
        display: flex;
        .item {
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background-color: #ccc;
          margin-right: 3px;
          border-radius: 3px;
        }
        .active {
          color: #ff5000;
          border: 1px solid #ff5000;
        }
      }
    }

    .num {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      div {
        color: #888;
        margin-right: 30px;
      }
    }
    .add {
      display: flex;
      font-size: 16px;
      padding: 5px;
      .qiang {
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        font-weight: 700;
        background-color: orangered;
        border: 1px solid orangered;
        border-radius: 30px 0 0 30px;
      }
      .jiagou {
        width: 140px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        font-weight: 700;
        background-color: orange;
        border: 1px solid orange;
        border-radius: 0 30px 30px 0;
        margin-right: 15px;
      }
      .line {
        margin-top: 12px;
        height: 15px;
        border: 1px solid #eee;
      }

      .sc {
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 12px;
        color: #888;
        margin-left: 20px;
      }
    }
  }

  .comment {
    width: 100%;
    .cart {
      width: 100%;
      .item {
        width: 100%;
        height: 60px;
        display: flex;
        border-bottom: 1px solid #eee;
        .item1,
        .item2 {
          height: 60px;
          font-size: 16px;
          font-weight: 600;
          padding: 15px 10px 20px 10px;
          box-sizing: border-box;
        }
        .active {
          border-bottom: 1px solid #ff5000;
        }
      }

      .cart-detail {
        /*垂直方向居中*/
        vertical-align: middle;
        /*水平方向居中*/
        text-align: center;
        margin: 10px auto;
      }
      .cart-comment {
        margin-top: 20px;
        .cart-comment-item {
          display: flex;
          margin-left: 20px;
          margin-bottom: 20px;
          font-size: 10px;

          .itab {
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 15px;
            background-color: #eee;
          }

          .itab0 {
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 15px;
            background-color: #eee;
            margin: 0 10px;
          }

          .active {
            color: #fff;
            background-color: #ff5000;
          }
        }
      }
    }
  }

  .supermarket .spuer-header {
    font-size: 16px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 15px;
  }

  .supermarket .marketDetail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .supermarket .marketDetail .goods-detail {
    width: 220px;
    height: 304px;
  }
  .supermarket .marketDetail .goods-detail .goods-img {
    width: 220px;
    height: 220px;
    border-radius: 18px;
  }

  .supermarket .marketDetail .goods-detail .goods-desc {
    margin-top: 11px;
    font-size: 16px;
    font-weight: 500;
    height: 22px;
    line-height: 22px;
    width: 208px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #000;
  }

  .supermarket .marketDetail .goods-detail .goods-price {
    margin-top: 5px;
    font-size: 20px;
    height: 24px;
    line-height: 24px;
    color: #ff5000;
  }

  .supermarket .marketDetail .goods-nation-detail {
    width: 222px;
    height: 302px;
    position: relative;
  }
  .supermarket .marketDetail .goods-nation-detail0 .goods-desc {
    margin-top: 11px;
    font-size: 18px;
    height: 22px;
    line-height: 22px;
    width: 208px;
  }
}
</style>
